import { styled } from 'linaria/react'
import { View } from '@tarojs/components'

const HomeContainer = styled(View)`
  .home {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .map {
    flex: 1;
  }

  #map {
    width: 100%;
    height: calc(100vh - 88rpx);
    position: relative;
  }

  .nav {
    height: 88rpx;
    display: flex;
    color: #fff;
  }

  .nav view {
    text-align: center;
    line-height: 88rpx;
  }

  .nav .publish {
    flex: 1;
    background-color: #ff9700;

  }

  .nav .search {
    flex: 1;
    background-color: #03bbd5;
  }

  .cover-view {
    position: absolute;
    bottom: 30rpx;
    left: 30rpx;
  }

  .cover-view-pin {
    width: 44rpx;
    height: 62rpx;
    position: absolute;
    left: 50%;
    top: calc(50% - 31rpx);
    transform: translate(-50%, -50%);
  }

  .cover-view cover-image {
    width: 60rpx;
    height: 60rpx;
  }
`

export {
  HomeContainer
}